<template>
  <div id="app">
    <headView></headView>
    <div class="content-box">
      <leftView></leftView>
      <centerView @currComp="currComp"></centerView>
      <rightView :myCurrComp="myCurrComp"></rightView>
    </div>
  </div>
</template>

<script>
import headView from "./view/headView.vue";
import centerView from "./view/centerView.vue";
import leftView from "./view/leftView.vue";
import rightView from "./view/rightView.vue";

export default {
    name: "App",
    data() {
        return {
            myCurrComp: null,
        };
    },
    components: { headView, centerView, leftView, rightView },
    methods: {
        currComp(comp) {
            this.myCurrComp = comp;
        },
    },
};
</script>

<style lang="less">
.content-box {
    display: flex;
    height: calc(100vh - 80px);
}
</style>
